<template>
  <div>
    <h1>转盘抽奖</h1>
    <LuckyWheel
      ref="luckyGridRef"
      width="300px"
      height="300px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallBack"
      @end="endCallBack"
    />
  </div>
  <!-- <lucky-wheel width="200px" height="200px" :blocks="blocks" :prizes="prizes" /> -->
</template>

<script lang="ts">
import { ref, defineComponent, toRaw } from "vue";
export default defineComponent({
  // export default {
  name: "xxxx",
  setup(props) {
    const luckyGridRef = ref();
    const blocks = ref([{ padding: "13px", background: "#617df2" }]);
    const prizes = ref([
      { fonts: [{ text: "张三", top: "10%" }], background: "#e9e8fe" },
      { fonts: [{ text: "李四", top: "10%" }], background: "#b8c5f2" },
      { fonts: [{ text: "王五", top: "10%" }], background: "#e9e8fe" },
      { fonts: [{ text: "马六", top: "10%" }], background: "#b8c5f2" },
      { fonts: [{ text: "刘七", top: "10%" }], background: "#e9e8fe" },
      { fonts: [{ text: "周八", top: "10%" }], background: "#b8c5f2" },
    ]);

    const buttons = [
      { radius: "50px", background: "#617df2" },
      { radius: "45px", background: "#afc8ff" },
      {
        radius: "40px",
        background: "#869cfa",
        pointer: true,
        fonts: [{ text: "开始\n抽奖", top: "-20px" }],
      },
    ];

    const startCallBack = () => {
      // 开始游戏
      luckyGridRef.value.play();
      // 假设接口的请求速度是5s
      setTimeout(() => {
        // 5s后拿到后端返回的中奖索引
        const index = Math.round(Math.random() * 5);
        console.log("index----", index);
        // 然后停止游戏 (缓慢停止)
        luckyGridRef.value.stop(index);
      }, 5000);
    };
    const endCallBack = (prize) => {
      // 当完全停止时, 触发回调函数
      console.log(prize);
    };

    return {
      blocks,
      prizes,
      buttons,
      luckyGridRef,
      startCallBack,
      endCallBack,
    };
  },
});

// };
</script>
